<template>
	<div class="app-container">
		<el-form :model="form" :rules="rules" ref="queryRef" :inline="true" label-width="106px">
			<div class="bgWhite radius8 pb30">
				<div class=" fb fs16 border-bottom pl30 line-64">
					{{form.id == '' ? '新增' : '编辑'}}作物
				</div>
				<div class="p20">
					<div class="fb mb20 pl10">
						基础信息
					</div>
					<el-form-item label="作物名称" prop="cropName">
						<el-input size="large" v-model="form.cropName" style="width: 248px" placeholder="请填写" />
					</el-form-item>
					<el-form-item label="作物编码" prop="cropCode">
						<el-input size="large" v-model="form.cropCode" style="width: 248px" placeholder="请填写" />
					</el-form-item>
					<el-form-item label="作物类别" prop="cropCategory">
						<el-select v-model="form.cropCategory" placeholder="请选择" size="large"
							style="width: 248px">
							<el-option v-for="dict in bus_crop_category" :key="dict.value" :label="dict.label"
								:value="dict.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="常见靶标" prop="commonTarget">
						<el-select v-model="form.commonTarget" placeholder="请选择" size="large"
							style="width: 248px">
							<el-option v-for="dict in bus_common_target" :key="dict.value" :label="dict.label"
								:value="dict.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="常见发生月份" prop="commonOccurMonth1">
						<el-select v-model="form.commonOccurMonth1" placeholder="请选择" size="large"
						multiple collapse-tags
							style="width: 248px">
							<el-option v-for="dict in bus_common_month" :key="dict.value" :label="dict.label"
								:value="dict.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="常见区域" prop="commonRegion1">
						<el-select v-model="form.commonRegion1" placeholder="请选择" size="large"
							multiple
						    collapse-tags
							style="width: 248px">
							<el-option v-for="dict in address" :key="dict.code" :label="dict.name"
								:value="dict.code" />
						</el-select>
						<!-- <el-cascader v-model="form.commonRegion" ref="cascader" style="width:248px;" :props="address"
							@change="handleChangeAddress" size="large" clearable>
						</el-cascader> -->
					</el-form-item>
				</div>
				<div class="text-center" style="margin-top: 300px;">
					<el-button type="defaultBtn" @click="submitProduct('queryRef')" style="height: 38px;width: 88px;">
						确定
					</el-button>
					<el-button type="operate" style="width: 88px;height: 38px;"
						@click="resetQuery()">重置</el-button>
				</div>
			</div>
		</el-form>
		
	</div>
</template>
<script setup name="addCustomer">
	const {
		proxy
	} = getCurrentInstance();
	const {
		bus_crop_category, //作物类别
		bus_common_target, //常见靶标
		bus_common_month,//常见发生月份
	} =
	proxy.useDict(
		"bus_crop_category",
		"bus_common_target",
		"bus_common_month"
		);
</script>
<script>
	import {
		addCrop,//添加作物
		getCrop, //详情
		updateCrop, //修改
	} from "@/api/business/product";
	import {
		getDivisions
	} from "@/api/business/opportunity";//地址
	import {
		resetForm,
	} from '@/utils/ruoyi'//重置
import { time } from "echarts";
	export default {
		data() {
			return {
				form: {
					id: '',
					cropName:'',//作物名称
					cropCode:'',//作物编码
					cropCategory:'',//作物类别
					commonTarget:'',//常见靶标
					commonOccurMonth:'',//常见发生月份
					commonRegion:[],//常见发生区域
					commonOccurMonth1:'',//常见发生月份
					commonRegion1:[],//常见发生区域
				},
				rules: {
					cropName: [{
						required: true,
						message: '请输入作物名称',
						trigger: 'blur'
					}],
					commonTarget: [{
						required: true,
						message: '请选择常见靶标',
						trigger: 'change'
					}],
					commonOccurMonth1: [{
						required: true,
						message: '请选择常见发生月份',
						trigger: 'change'
					}],
					commonRegion1: [{
						required: true,
						message: '请选择常见发生区域',
						trigger: 'change'
					}],
				},
				address: [],
			}
		},
		created() {
			this.form.id = this.$route.query.id ? this.$route.query.id : ''
			if (this.form.id != '') {
				const obj = Object.assign({}, this.$route, {
					title: "编辑作物"
				});
				this.$tab.updatePage(obj);
			} else {
				const obj = Object.assign({}, this.$route, {
					title: "新增作物"
				});
				this.$tab.updatePage(obj);
			}
			this.getAddress()
		},
		methods: {
			// 查询地址
			getAddress(){
				let query = {
						type: 'provinces',
						pageNum: 1,
						pageSize: 5000
					}
					//查询接口
					getDivisions(query, query.type).then(res => {
						if(res.code == 200){
							this.address = res.rows
							//获取详情
							if(this.form.id != ''){
								this.getCrop()
							}
						}
					})
			},
			closePage() {
				this.$tab.closePage();
			},
			// 重置
			resetQuery() {
				this.resetForm("queryRef");
			},
			// 详情
			getCrop() {
				getCrop(this.form.id).then(res => {
					this.form = res.data
					this.form.commonOccurMonth1 = res.data.commonOccurMonth.split(',')
					this.form.commonRegion1 = res.data.commonRegion.split(',')
				})
			},
			//添加
			submitProduct(formName) {
				console.log(this.form,'form')
				this.$refs[formName].validate((valid) => {
					if (valid) {
						// 新增
						this.form.commonOccurMonth = this.form.commonOccurMonth1.length > 0 ? this.form.commonOccurMonth1.join(',') : ''
						this.form.commonRegion = this.form.commonRegion1.length > 0 ? this.form.commonRegion1.join(',') : ''
						if (this.form.id == '') {
							addCrop(this.form).then(response => {
								this.$message({
									message: '添加成功',
									type: 'success'
								});
								setTimeout(() => {
									this.$router.go(-1)
								}, 1500)
							})
						} else {
							// 编辑
							updateCrop(this.form).then(response => {
								this.$message({
									message: '编辑成功',
									type: 'success'
								});
								setTimeout(() => {
									this.$router.go(-1)
								}, 1500)
							})
						}
					} else {
						return false;
					}
				});
			},

		}
	}
</script>

<style>
	.avatar-uploader .el-upload {
		background: #F7F8FA;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		transition: var(--el-transition-duration-fast);
		width: 110px;
		height: 110px;
		text-align: center;
		line-height: 22px;
		color: #8c939d;
	}

	.avatar-uploader .el-upload:hover {
		border-color: var(--el-color-primary);
	}

	.el-icon.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		text-align: center;
	}

	.shopImg {
		width: 110px;
		height: 110px;
	}
</style>